<template>
  <!-- 登陆逻辑,简单的样式布局 -->
  <div class="login">
    <div class="login_box">
      <van-form ref="form">
        <van-field
          class="phone"
          name="phone"
          v-model="form.mobile"
          placeholder="请输入手机号"
          :rules="rules.mobile"
        >
          <template #left-icon>
            <i class="iconfont f22">
              &#xe64b;
            </i>
          </template>
        </van-field>
        <van-field
          class="code"
          v-model="form.code"
          placeholder="请输入验证码"
          :rules="rules.code"
        >
          <template #left-icon>
            <i class="iconfont f22">
              &#xe65d;
            </i>
          </template>
          <template #button>
            <span class="vcode" @click="getCode">
              获取验证码
            </span>
          </template>
        </van-field>

        <van-button block class="button" @click="submit"
          ><span>登陆</span></van-button
        >
      </van-form>
    </div>
  </div>
</template>

<script>
import { UserInfo, getUser } from '@/api/login.js'
import { setlocal, getlocal } from '@/utils/local.js'
export default {
  data () {
    return {
      form: {
        mobile: '13999999999',
        code: '246810'
      },

      rules: {
        //   校验手机号
        mobile: [
          {
            required: true,
            message: '手机不能为空',
            trigger: 'onChange'
          },
          {
            validator: value => {
              return /^1[3-9][0-9]{9}$/.test(value)
            },
            message: '手机号不正确',
            trigger: 'onBlur'
          }
        ],
        code: [
          {
            required: true,
            message: '验证码不能为空',
            trigger: 'onSubmit'
          },
          {
            validator: value => {
              return /^\d{6}$/.test(value)
            },
            message: '验证码不对',
            trigger: 'onBlur'
          }
        ]
      }
    }
  },
  methods: {
    getCode () {
      console.log(123)
      // 局部验证
      this.$refs.form
        .validate('phone')
        .then(() => {
          // 加载中...
          this.$toast.loading({
            message: '加载中',
            duration: 2000
          })
          this.$nextTick(() => {
            this.$toast.success({
              message: '246810',
              duration: 2000
            })
          })
        })
        .catch(() => {})
    },
    submit () {
      // 全局校验
      this.$refs.form
        .validate()
        .then(async () => {
          // 发起登陆请求
          const res = await UserInfo(this.form)
          console.log('登陆', res)
          // 保存token
          setlocal(res.data.data.token, 'token')
          // 保存过期使用的token
          setlocal(res.data.data.refresh_token, 'refresh_token')
          if (getlocal('token')) {
            // console.log(getlocal('token'))
            // 发送请求获取指定用户信息
            const res = await getUser()
            console.log('用户', res)
            // 存储用户信息在vuex
            this.$store.commit('setUserInfo', res.data.data)
            // 修改登陆状态
            this.$store.commit('setIslogin', true)
            this.$toast.success({
              message: '登陆成功',
              duration: 2000
            })

            // 接收参数,为了回跳做准备
            const _redirect = this.$route.query.redirect
            if (_redirect !== '/login' && _redirect) {
              this.$router.push(_redirect)
            } else {
              this.$router.push('/table')
            }
          }
        })
        .catch(res => {
          this.$toast.fail({
            message: res.message,
            duration: 2000
          })
        })
    }
  },
  mounted () {
    document.body.style.backgroundColor = 'skyblue'
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#ffffff'
  },
  created () {
    // 在有token的情况不给跳登录页
    console.log('回跳', this.$route.query.redirect)
    if (getlocal('token')) {
      this.$router.push('/table')
    }
  }
}
</script>
<style lang="less">
body {
  background-color: skyblue;
}
.login {
  .login_box {
    margin: 200px auto;
    width: 300px;
    height: 270px;
    border-radius: 15px;
    padding: 40px @p15 15px;

    background-color: #fff;
    .phone,
    .code {
      background-color: #e8f0fe;
      border-radius: 5px;

      .f22 {
        margin-right: 10px;
      }
    }
    .code {
      margin-top: 20px;
    }
    .button {
      margin-top: 40px;
      background-color: #905ff1;
      opacity: 0.8;
      border-radius: 50px;
      span {
        color: #fff;
      }
    }
  }
}
</style>
